<template>
  <CommonBox
    :info-display1="true"
    :info-display2="true"
    :info-color1="'gray'"
    :info-color2="'rgb(109, 133, 246)'"
    :selectDisplay="true"
    :btnDisplay1="false"
    :btnDisplay2="false"
  >
    <template v-slot:subtitle><span class="subtitle">数据分析</span></template>
    <template v-slot:info-title1><span>最佳指标</span></template>
    <template v-slot:info-title2><span>当前指标</span></template>
    <template v-slot:footer
      ><div ref="chart" style="width: 480px; height: 300px"></div
    ></template>
  </CommonBox>
</template>

<script>
import CommonBox from "./CommonBox.vue";
import * as echarts from "echarts";
export default {
  components: {
    CommonBox,
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var echart = echarts.init(this.$refs.chart);
      echart.setOption({
        color: ["gray", "rgb(109, 133, 246)"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          top: "1%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          show: false,
        },
        yAxis: {
          type: "category",
          axisLine: { show: false }, //不显示y轴坐标线
          axisTick: { show: false }, //不显示y轴刻度线
          data: ["土壤温度", "空气湿度", "土壤湿度", "光照", "空气温度"],
        },
        series: [
          {
            // name: "2011",
            label: {
              show: true,
              position: "right",
              formatter: function (params) {
                // return params.name;
                switch (params.name) {
                  case "空气温度":
                  case "土壤温度":
                    return params.data + "/℃";
                  case "光照":
                    return params.data + "/lux";
                  case "空气湿度":
                  case "土壤湿度":
                    return params.data + "%";
                }
              },
            },
            type: "bar",
            data: [13, 49, 60, 88, 40],
          },
          {
            // name: "2012",
            label: {
              show: true,
              position: "right",
              formatter: function (params) {
                // return params.name;
                switch (params.name) {
                  case "空气温度":
                  case "土壤温度":
                    return params.data + "/℃";
                  case "光照":
                    return params.data + "/lux";
                  case "空气湿度":
                  case "土壤湿度":
                    return params.data + "%";
                }
              },
            },
            type: "bar",
            data: [69, 7, 75, 40, 24],
          },
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped>
.subtitle {
  font-weight: 800;
}
</style>